import React, { useState } from 'react'
import { Space, Table, Pagination, Button, Input, Select, Dropdown, Tag, Drawer } from 'antd';
import "./DeviceNew.css"
import {
  CaretDownOutlined
} from '@ant-design/icons';
const columns = [
  {
    title: '设备标识',
    dataIndex: 'deviceId',
    key: 'deviceId',
    align: "center",
    fixed: 'left',
    render: (text) => {
      return <span style={{ fontSize: "10px" }}>{text}</span>
    }
  },
  {
    title: '设备名称',
    dataIndex: 'deviceName',
    key: 'deviceName',
    align: "center",
    fixed: 'left',
    render: (text) => {
      return <span style={{ fontSize: "10px" }}>{text}</span>
    }
  },
  {
    title: '新建状态',
    dataIndex: 'createState',
    key: 'createState',
    align: "center",
    render: (text) => {
      return <Tag color="cyan">{text}</Tag>
    }
  },
  {
    title: '所属地市',
    dataIndex: 'deviceCity',
    key: 'deviceCity',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "10px" }}>{text}</span>
    }
  },
  {
    title: '所属县区',
    dataIndex: 'deviceCounty',
    key: 'deviceCounty',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "10px" }}>{text}</span>
    }
  },
  {
    title: '管理单位',
    dataIndex: 'manageUnit',
    key: 'manageUnit',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "10px" }}>{text}</span>
    }
  },
  {
    title: '运维单位',
    dataIndex: 'operateUnit',
    key: 'operateUnit',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "10px" }}>{text}</span>
    }
  },
  {
    title: '运营状态',
    dataIndex: 'operateState',
    key: 'operateState',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "10px" }}><Tag color="gold">{text}</Tag></span>
    }
  },
  {
    title: '新建状态说明',
    dataIndex: 'createStateInfo',
    key: 'createStateInfo',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "10px" }}>{text}</span>
    }
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate',
    fixed: 'right',
    align: "center",
    render: (text, item) => {
      return <a style={{ fontSize: "10px", }} href>重置密码</a>
    }
  },
];
const data = [
  {
    key: '1',
    deviceId: '903242342',
    deviceName: "三期29号楼",
    createState: '新建成功',
    deviceCity: "福州市",
    manageUnit: "长乐公司",
    operateUnit: "×××配电所",
    operateState: "待调试",
    createStateInfo: "-",
    deviceCounty: "长乐区",
  },
  {
    key: '2',
    deviceId: '903242342',
    deviceName: "三期29号楼",
    createState: '新建成功',
    deviceCity: "福州市",
    manageUnit: "长乐公司",
    operateUnit: "×××配电所",
    operateState: "待调试",
    createStateInfo: "-",
    deviceCounty: "长乐区",
  }
];
const items = [
  {
    label: '调试校验',
    key: '1',
  },
];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};
const getRowClassName = (record, index) => {
  console.log(record, index);
  let className = '';
  className = index % 2 === 0 ? "oddRow" : "evenRow";
  return className
}
export default function DevDetail() {
  const [selectionType, setSelectionType] = useState('checkbox');
  return (
    <div>
      <Space size={20} wrap={true} >
        <div className='inputValue1div'>
          <span>设备标识</span><Input placeholder="请输入" className='inputValue1' />
        </div>
        <div className='inputValue1div'>
          <span>设备名称</span><Input placeholder="请输入" className='inputValue1' />
        </div>
        <div style={{ fontSize: "10px" }}>
          <span className='inputValue1divspan'>所属地市</span>
          <Select placeholder="请选择" className='inputValue1'
            options={[
              {
                value: '福州市',
                label: '福州市',
              },
            ]}
          />
        </div>
        <div style={{ fontSize: "10px" }}>
          <span className='inputValue1divspan'>所属地区</span>
          <Select placeholder="请选择" className='inputValue1'
            options={[
              {
                value: '福州市',
                label: '福州市',
              },
            ]}
          />
        </div>
        <div style={{ fontSize: "10px" }}>
          <span className='inputValue1divspan'>管理单位</span>
          <Select placeholder="请选择" className='inputValue1'
            options={[
              {
                value: '福州市',
                label: '福州市',
              },
            ]}
          />
        </div>
        <div style={{ fontSize: "10px" }}>
          <span className='inputValue1divspan'>运维单位</span>
          <Select placeholder="请选择" className='inputValue1'
            options={[
              {
                value: '福州市',
                label: '福州市',
              },
            ]}
          />
        </div>
        <div style={{ fontSize: "10px" }}>
          <span className='inputValue1divspan' style={{ lineHeight: '16px' }}>密码存在持特殊字符</span>
          <Select placeholder="请选择" className='inputValue1'
            options={[
              {
                value: '福州市',
                label: '福州市',
              },
            ]}
          />
        </div>
        <div style={{ fontSize: "10px" }}>
          <span className='inputValue1divspan'>新建状态</span>
          <Select placeholder="请选择" className='inputValue1'
            options={[
              {
                value: '福州市',
                label: '福州市',
              },
            ]}
          />
        </div>
        <div style={{ fontSize: "10px" }}>
          <span className='inputValue1divspan'>运营状态</span>
          <Select placeholder="请选择" className='inputValue1'
            options={[
              {
                value: '福州市',
                label: '福州市',
              },
            ]}
          />
        </div>
        <div>
          <Space>
            <Button style={{ color: "white", background: "#1FBBA9", fontSize: "10px", borderRadius: "4px" }}>查询</Button>
            <Button style={{ color: "black", fontSize: "10px", borderRadius: "4px" }}>重置</Button>
            <Button style={{ color: "white", background: "#1FBBA9", padding: "4px 9px" }}>批量导出
              <Dropdown
                menu={{
                  items,
                }}
                placement="bottomLeft"
                arrow
              >
                <CaretDownOutlined style={{ borderLeft: "2px solid white", padding: "0 0 0 5px" }} />
              </Dropdown>
            </Button>
          </Space>
        </div>

      </Space>

      <Table
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        rowClassName={(record, index) => getRowClassName(record, index)}
        columns={columns} dataSource={data} style={{ border: "1px solid #c9cacac7", margin: "15px 0 0 0" }}
        pagination={false}
        size='small'
        scroll={{
          x: 1200,
        }}
      />
      <Pagination
        total={20}
        showTotal={(total) => `共 ${total} 条记录 第1~${total > 9 ? 10 : total} 条`}
        defaultCurrent={1}
        style={{ margin: "20px 0 0 0", fontSize: "10px" }}
      />
      {/* <Import
        open={openImport}
        onCancel={() => {
          setOpenImport(false);
        }}
      /> */}

    </div>
  )
}
